
//---------------实现基本的剪裁效果--------------//

// 找到剪裁区的图片
let image = $('#image')
// console.log(image);
//配置项
let option = {
    // 约束剪裁框的宽高比
    aspectRatio: 1,

    // 指定预览区
    preview: '.img-preview'
}
// 生成配置剪裁框
image.cropper(option)

//------------点击“上传”能够选择图片------------//
$('#chooseFile').on('click', function () {
    // console.log(1);
    $('#file').trigger('click')
})

// --------------- 3. 文件域内容改变了，能够更换剪裁区的图片 -------------
$('#file').on('change', function () {
    // console.dir(this);
    let fileList = this.files;   //获取选择的文件列表
    if (fileList.length > 0) {
        // URL是一个内置对象，createObjectURl（） 方法，专门为文件对象生成url

        let url = URL.createObjectURL(fileList[0])
        // console.log(url);
        // 更换剪裁区的图片  (销毁剪裁区-->更换图片-->创建剪裁区)
        image.cropper('destroy').attr('src', url).cropper(option)
    }
})

//--------------点击确定更换图片--------------//
$('.queding').on('click', function () {
    // 剪裁图片,得到base64格式
    let canvas = image.cropper('getCroppedCanvas', { width: 30, height: 30 });
    // console.log(canvas);
    let base64 = canvas.toDataURL('image/jpeg', 0.3);
    // console.log(base64);
    $.ajax({
        url: '/my/user/avatar',
        type: 'post',
        data: {
            avatar: base64
        },
        success: function (res) {
            layer.msg(res.message);
            if (res.status === 0) {
                // 更新index.html的头像
                window.parent.getUserInfo();
                // console.log(window.parent.getUserInfo());
            }
        }
    })
})